<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/css.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/index.css">
    <script src="/js/axios.min.js" type="text/javascript"></script>
    <script src="/js/vue.js"></script>
</head>
<style>
    .block{
        display: block;
    }
    .none{
        display: none;
    }
    
</style>
<body>
    <div id="app">
        <!--头部导航栏-->
        <div class="header">
            <div class="wrap">
                <ul class="header-left">
                    <li><a href="#">小米商城</a><span>|</span></li>
                    <li><a href="#">MIUI</a><span>|</span></li>
                    <li><a href="#">loT</a><span>|</span></li>
                    <li><a href="#">云服务</a><span>|</span></li>
                    <li><a href="#">天星数科</a><span>|</span></li>
                    <li><a href="#">有品</a><span>|</span></li>
                    <li><a href="#">小爱开放平台</a><span>|</span></li>
                    <li><a href="#">企业团购</a><span>|</span></li>
                    <li><a href="#">资质证照</a><span>|</span></li>
                    <li><a href="#">协议规则</a><span>|</span></li>
                    <li>
                        <a href="#">下载app</a><span>|</span>
                        <div class="download">
                            <a href="#">
                                <img src="/img/Download.jpg" alt="">
                                <p>小米商城app</p>
                            </a>
                        </div>
                        <div class="triangle"></div>
                    </li>
                    <li><a href="#">智能生活</a><span>|</span></li>
                    <li><a href="#">Select Location</a></li>
                </ul>
                <ul class="header-right">
                    <li id="Login-li"><a href="Login.html">登录</a><span>|</span></li>
                    <li id="Rigist-li"><a href="Login.html">注册</a><span>|</span></li>
                    <li id="account-li" >
                        <a id="account">{{account}}</a>
                        <span>|</span>
                        <div id="pesondiv">
                            <ul id="pesonul">
                                <li onclick="mypersonalcenter()">个人中心</li>
                                <li onclick="evaluateorder()">评价订单</li>
                                <li onclick="mypersonalcenter()">我的喜欢</li>
                                <li onclick="location.href=('AccountManagement.html')">小米账户</li>
                                <li onclick="location.href=('Login.html')">退出登录</li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="Login.html">我的订单</a><span>|</span></li>
                    <li><a href="#">消息通知</a></li>
                    <li class="cart">
                        <a href="#">购物车</a>
                        <div class="cart-list">
                            哦！购物车是空的！
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!--下拉导航-->
        <div class="nav">
            <div class="wrap">
                <div class="logo">
                    <a href="#">
                        <img src="/img/Login/Login.jpg"  onclick="Home()" style="width: 75px;" />
                    </a>
                </div>
                <div class="nav-bar">
                    <ul style="color: black;">
                        <li>手机
                            <div class="nav-bar-list">
                                <div class="wrap">
                                    <ul style="color: black;">
                                        <div v-for="(item,index) in PhoneAllList" v-if="index<4" @click="TextClick($event)">
                                            <input type="hidden" :value="item.productID" />
                                            <li>
                                                <div class="nav-img-box" style="border-right: 1px solid black;">
                                                    <img :src="item.productPicture" alt="">
                                                </div>
                                                <p>{{item.productName}}</p>
                                                <p>{{item.productName}}元起</p>
                                            </li>
                                        </div>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li>电视
                            <div class="nav-bar-list">
                                <div class="wrap">
                                    <ul style="color: black;">
                                        <div v-for="(item,index) in TelevisionAllList" v-if="index<4" @click="TextClick($event)">
                                            <input type="hidden" :value="item.productID" />
                                            <li>
                                                <div class="nav-img-box" style="border-right: 1px solid black;">
                                                    <img :src="item.productPicture" alt="">
                                                </div>
                                                <p>{{item.productName}}</p>
                                                <p>{{item.productName}}元起</p>
                                            </li>
                                        </div>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li>笔记本
                            <div class="nav-bar-list">
                                <div class="wrap">
                                    <ul style="color: black;">
                                        <div v-for="(item,index) in FlatAllList" v-if="index<3" @click="TextClick($event)">
                                            <input type="hidden" :value="item.productID" />
                                            <li>
                                                <div class="nav-img-box" style="border-right: 1px solid black;">
                                                    <img :src="item.productPicture" alt="">
                                                </div>
                                                <p>{{item.productName}}</p>
                                                <p>{{item.productName}}元起</p>
                                            </li>
                                        </div>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li>音箱
                            <div class="nav-bar-list">
                                <div class="wrap">
                                    <ul style="color: black;">
                                        <div v-for="(item,index) in TravelAllList" v-if="index<1" @click="TextClick($event)">
                                            <input type="hidden" :value="item.productID" />
                                            <li>
                                                <div class="nav-img-box" style="border-right: 1px solid black;">
                                                    <img :src="item.productPicture" alt="">
                                                </div>
                                                <p>{{item.productName}}</p>
                                                <p>{{item.productName}}元起</p>
                                            </li>
                                        </div>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li>家电
                            <div class="nav-bar-list">
                                <div class="wrap">
                                    <ul style="color: black;">
                                        <div v-for="(item,index) in HouseHoldAllList" v-if="index<1" @click="TextClick($event)">
                                            <input type="hidden" :value="item.productID" />
                                            <li>
                                                <div class="nav-img-box" style="border-right: 1px solid black;">
                                                    <img :src="item.productPicture" alt="">
                                                </div>
                                                <p>{{item.productName}}</p>
                                                <p>{{item.productName}}元起</p>
                                            </li>
                                        </div>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li>路由器
                            <div class="nav-bar-list">
                                <div class="wrap">
                                    <ul style="color: black;">
                                        <div v-for="(item,index) in RouterAllList" v-if="index<1" @click="TextClick($event)">
                                            <input type="hidden" :value="item.productID" />
                                            <li>
                                                <div class="nav-img-box" style="border-right: 1px solid black;">
                                                    <img :src="item.productPicture" alt="">
                                                </div>
                                                <p>{{item.productName}}</p>
                                                <p>{{item.productName}}元起</p>
                                            </li>
                                        </div>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li><a href="#">服务中心</a></li>
                        <li><a href="#">社区</a></li>
                    </ul>
                </div>
                <div class="search">
                    <input type="text" id="select" placeholder="Redmi Note 11T Pro系列" value="Redmi Note 11T Pro系列">
                    <button type="button" @click="search()">搜索</button>
                    <div class="search-list">
                        <a href="#">手机</a>
                        <a href="#">电脑</a>
                        <a href="#">笔记本 平板</a>
                        <a href="#">小米手环7 NFC版</a>
                        <a href="#">小爱音箱 Pro</a>
                        <a href="#">立式空调</a>
                        <a href="#">K歌麦克风</a>
                        <a href="#">米家跑步机</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        axios.defaults.baseURL = 'http://localhost:8080/'
        let vm = new Vue({
            el:"#app",  
            data:{
                PhoneAllList:[],//手机
                TelevisionAllList:[],//电视
                FlatAllList:[],//笔记本平板
                TravelAllList:[],//出行穿戴
                HouseHoldAllList:[],//家电
                RouterAllList:[],//路由器
                account: '',
            },
            created: function () {
                // 获取跳转页面的url数据
                //首页传送的指定商品id从而获取对应商品信息
                var url = window.location.href
                var path = url.split('?')[1]
                var field = new URLSearchParams('?'+path)
                var account = field.get('account')
                // var account = 1684237200
                this.account= account
                this.GetUserID(account)
                this.GetAll()
            },
            methods: {
                //读取登录用户信息
                GetUserID : function(account){
                    if(this.account == null || this.account == 0){
                        var login =  document.getElementById("Login-li")
                        var rigist = document.getElementById("Rigist-li")
                        login.className="block"
                        rigist.className="block"
                        var account = document.getElementById("account-li")
                        account.className="none"
                    }else{
                        var login =  document.getElementById("Login-li")
                        var rigist = document.getElementById("Rigist-li")
                        login.className="none"
                        rigist.className="none"
                        var account = document.getElementById("account-li")
                        account.className="block"
                    }
                },
                GetAll : function(){
                    axios.get('/product/typeAll', { params: { typeName : "手机" } }).then(function (resp) {
                        vm.PhoneAllList = resp.data.data
                    });
                    axios.get('/product/typeAll', { params: { typeName : "电视" } }).then(function (resp) {
                        vm.TelevisionAllList = resp.data.data
                    });
                    axios.get('/product/typeAll', { params: { typeName : "笔记本 平板" } }).then(function (resp) {
                        vm.FlatAllList = resp.data.data
                    });
                    axios.get('/product/typeAll', { params: { typeName : "耳机 音箱" } }).then(function (resp) {
                        vm.TravelAllList = resp.data.data
                    });
                    axios.get('/product/typeAll', { params: { typeName : "家电" } }).then(function (resp) {
                        vm.HouseHoldAllList = resp.data.data
                    });
                    axios.get('/product/typeAll', { params: { typeName : "智能 路由器" } }).then(function (resp) {
                        vm.RouterAllList = resp.data.data
                    });
                },
                search:function(){
                    var name = document.getElementById("select").value;
                    location.href ="WaresSearch.html?name="+name+"&account="+vm.account;
                }
            },
        });
    </script>
</body>
</html>